<!-- 商品详情 -->
<template>
    <view class="pageBox">
        <view class="proBox">
            <view class="navbarBox">
                <u-status-bar></u-status-bar>
                <!-- 自定义导航栏 -->
                <view class="custom-navbar">
                    <view class="back-button" @click="goBack">
                        <u-icon name="arrow-left" color="#FFF" size="24"></u-icon>
                    </view>
                    <view class="pageTitle">商品详情</view>
                </view>
            </view>
            <!-- 轮播图 -->
            <u-swiper
                :list="bannerList"
                circular
                autoplay
                indicator
                height="750rpx"
                radius="0"
                indicatorStyle="bottom: 50rpx"
                indicatorMode="dot"
                indicatorActiveColor="#F88E20"
                indicatorInactiveColor="#00000066"
            />
            <!-- 详细信息 -->
            <view class="infoBox">
                <view class="title">
                    {{productData.storeName}}
                </view>
                
                <view class="detailTitleBox">
                    <!-- <image src="/static/img/title.png" mode="" /> -->
                    <u--image class="featureImg" src="/static/img/title.png" width="48rpx" height="48rpx" />
                    <text class="detailTitle">商品详情</text>
                </view>
                
                <image
                    class="detailImg"
                    src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
                    mode="widthFix" 
                />
            </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="btmBox">
            <view class="numPriceBox">
                <view class="priceBox">
                    <view class="yfBox">
                        <text class="yf">应付：</text>
                        <text class="unit">¥</text>
                        <text class="price">{{productData.price * number}}</text>
                    </view>
                    <view class="zjyh">
                        总计优惠：10
                    </view>
                </view>
                <u-number-box
                    :name="productData.id"
                    v-model="number"
                    bgColor="#FFFFFF"
                    :min="0"
                    disabledInput
                    @change="e => $emit('numChange', e)"
                >
                    <u-icon slot="minus" name="minus-circle" color="#9F07B7" size="50rpx" />
                    <u-icon slot="plus" name="plus-circle-fill" color="#9F07B7" size="50rpx" />
                </u-number-box>
            </view>
			<view class="btnBox">
				<view class="addCar" @tap="addCar">
					加入购物车
				</view>
				<view class="buyNow" @tap="buyNow">
					立即购买
				</view>
			</view>
            <u-safe-bottom></u-safe-bottom>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                number: 1,
                productData: {},
                bannerList: [
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png'
                ],
            };
        },
        onLoad(option) {
            this.productData = JSON.parse(option.productData)
            this.$http(`/api/product/detail/${this.productData.id}`).then(res => {
                
            })
        },
        methods: {
            goBack() {
                uni.navigateBack();
            },
			addCar() {
                this.$http('/api/cart/add', 'post', {
                    productId: this.productData.id,
                    cartNum: this.number
                }).then(res => {
                    uni.setStorage({
                    	key: 'buyCarList',
                    	data: buyCarList,
                    	success: () => {
                    		uni.showToast({
                    			title: '已加入购物车'
                    		})
                    	}
                    })
                })
				let buyCarList = uni.getStorageSync('buyCarList')
				if (buyCarList.find(i => i.id === productData.id)) {
					// 此商品已加过购物车，直接添加数量
					buyCarList.find(i => i.id === productData.id).buyCarNum += this.number
				} else{
					buyCarList.push({
						...this.productData,
						buyCarNum: this.number
					})
				}
                uni.setStorage({
                    key: 'buyCarList',
                    data: buyCarList,
                    success: () => {
                        uni.showToast({
                            title: '已加入购物车'
                        })
                    }
                })
			},
			buyNow() {
				uni.navigateTo({
					url: '/pages/order/creatOrder?productData=' + JSON.stringify([{
						...this.productData,
						buyCarNum: this.number
					}])
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
    .pageBox {
        height: 100vh;
        display: flex;
        flex-direction: column;
        .proBox {
            flex: 1;
            overflow-y: auto;
            /* 自定义导航栏 */
            .navbarBox {
                width: 100%;
                position: absolute;
                top: 0;
                z-index: 1;
                .custom-navbar {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 20rpx;
                    height: 44px;
                    background-color: transparent;
                    color: $uni-text-color-inverse;
                    .back-button {
                        display: flex;
                        align-items: center;
                    }
                    
                    .pageTitle {
                        font-size: 32rpx;
                        font-weight: bold;
                        text-align: center;
                        flex: 1;
                    }
                }
            }
            ::v-deep .u-swiper-indicator {
                .u-swiper-indicator__wrapper {
                    .u-swiper-indicator__wrapper__dot {
                        width: 16rpx;
                        height: 16rpx;
                    }
                    .u-swiper-indicator__wrapper__dot--active {
                        width: 38rpx;
                    }
                }
            }
            .infoBox {
                padding: 0 30rpx;
                position: relative;
                top: -32rpx;
                background-color: $uni-bg-color;
                border-radius: 32rpx 32rpx 0 0;
                .title {
                    padding: 50rpx 0;
                    border-bottom: 1px solid $uni-border-color-btm;
                }
                .detailTitleBox {
                    padding: 30rpx 0;
                    display: flex;
                    align-items: center;
                    .detailTitle {
                        margin-left: 20rpx;
                    }
                }
                .detailImg {
                    width: 100%;
                }
            }
        }
        
        .btmBox {
            padding: 20rpx 30rpx;
            .numPriceBox {
                display: flex;
				justify-content: space-between;
				align-items: center;
                .priceBox {
                    .yfBox {
						
                        .yf {
                            font-size: 30rpx;
                            color: $uni-text-color-grey-6;
                        }
                        .unit {
                            font-family: DIN Alternate, DIN Alternate;
                            font-weight: bold;
                            font-size: 24rpx;
                            color: $uni-text-color-money;
                        }
                        .price {
                            font-family: DIN Alternate, DIN Alternate;
                            font-weight: bold;
                            font-size: 36rpx;
                            color: $uni-text-color-money;
                        }
                    }
                    .zjyh {
                        font-size: 24rpx;
                        color: #FA8E00;
                    }
                }
                
            }
			
			.btnBox {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.addCar {
					width: 330rpx;
					height: 78rpx;
					line-height: 78rpx;
					text-align: center;
					border: 1px solid $uni-border-color-gold;
					color: $uni-text-color-gold;
					border-radius: 100rpx;
				}
				.buyNow {
					width: 330rpx;
					height: 78rpx;
					line-height: 78rpx;
					text-align: center;
					border-radius: 100rpx;
					background: $uni-bg-color-btn;
					color: $uni-text-color-inverse;
				}
			}


        }
    }
</style>